<template>
  <div>
    <el-page-header @back="goBack" content="代理设置" style="color:#3198ff"></el-page-header>
    <div style="margin-top: 30px;">
      <el-row :gutter="20">
        <el-col :span="6">
          <div class="form-item button-container">
            <el-button type="primary" @click="add" icon="el-icon-circle-plus-outline">新增设置</el-button>
          </div>
        </el-col>
      </el-row>
      <div style="margin-top: 50px">
        <el-table
          ref="multipleTable"
          border
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <!-- <el-table-column prop="sort" label="序号" width="50px"></el-table-column> -->
          <el-table-column prop="levelTitle" label="等级标题" width="100px" fixed></el-table-column>
          <el-table-column prop="upDays" label="升级周期" width="180px">
            <template slot-scope="scope">
              <el-input-number
                placeholder="请输入"
                type="number"
                :min="0"
                :precision="0"
                :step="1"
                controls-position="right"
                v-model="scope.row.upDays"
                size="small"
              ></el-input-number>
              <span>天</span>
            </template>
          </el-table-column>
          <el-table-column prop="rebateRatio" label="返利比列" width="180px">
            <template slot-scope="scope">
              <el-input-number
                placeholder="请输入"
                type="number"
                :min="0"
                :max="100"
                :precision="1"
                :step="0.1"
                controls-position="right"
                v-model="scope.row.rebateRatio"
                size="small"
              ></el-input-number>
              <span>%</span>
            </template>
          </el-table-column>
          <el-table-column prop="superiorRebateRatio" label="上级返利比列" width="180px">
            <template slot-scope="scope">
              <el-input-number
                placeholder="请输入"
                type="number"
                :min="0"
                :max="100"
                :precision="1"
                :step="0.1"
                controls-position="right"
                v-model="scope.row.superiorRebateRatio"
                size="small"
              ></el-input-number>
              <span>%</span>
            </template>
          </el-table-column>
          <el-table-column prop="superiorRatio" label="上级分销比例" width="180px">
            <template slot-scope="scope">
              <el-input-number
                placeholder="请输入"
                type="number"
                :min="0"
                :max="100"
                :precision="1"
                :step="0.1"
                controls-position="right"
                v-model="scope.row.superiorRatio"
                size="small"
              ></el-input-number>
              <span>%</span>
            </template>
          </el-table-column>
          <el-table-column prop="secuperiorRatio" label="上两级分销比例" width="180px">
            <template slot-scope="scope">
              <el-input-number
                placeholder="请输入"
                type="number"
                :min="0"
                :max="100"
                :precision="1"
                :step="0.1"
                controls-position="right"
                v-model="scope.row.secuperiorRatio"
                size="small"
              ></el-input-number>
              <span>%</span>
            </template>
          </el-table-column>
          <el-table-column prop="standard" label="等级标准" width="200px">
            <template slot-scope="scope">
              <el-input-number
                placeholder="请输入"
                type="number"
                :min="0"
                :precision="0"
                :step="1"
                controls-position="right"
                v-model="scope.row.standard"
                size="small"
              ></el-input-number>
              <span>个/元</span>
            </template>
          </el-table-column>
          <el-table-column prop="coalitionRatio" label="商盟商家返利比例" width="180px">
            <template slot-scope="scope">
              <el-input-number
                placeholder="请输入"
                type="number"
                :min="0"
                :max="100"
                :precision="1"
                :step="0.1"
                controls-position="right"
                v-model="scope.row.coalitionRatio"
                size="small"
              ></el-input-number>
              <span>%</span>
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="50px">
            <template slot-scope="scope">
              <el-popconfirm title="确定删除此？" @onConfirm="handleClickDelete(scope.$index)">
                <el-button size="small" type="text" slot="reference">删除</el-button>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div style="text-align:center; margin-top: 50px;">
        <el-button type="primary" @click="submitForm()">保存</el-button>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "",
  data() {
    return {
      tableData: [],
      spuId: "",
    };
  },
  components: {},
  computed: {},
  beforeMount() {},
  mounted() {
    this.spuId = this.$route.query.id;
    this.initData();
  },
  methods: {
    //数字转中文
    numText(sn) {
      let chin_list=['一','二','三','四','五','六','七','八','九','十'];//所有的数值对应的汉字
    // let sn = parseInt(val)+1;//这里由于我的后台是从0开始排序
    if(sn<=10){
      return chin_list[sn-1];
    }
    else if(sn<=100){
      if(sn<20)
        return '十'+chin_list[sn%10-1];
      if(sn%10==0)
        return chin_list[Math.floor(sn/10)-1]+'十';
      else
        return chin_list[Math.floor(sn/10)-1]+'十'+chin_list[sn%10-1];
    }
    else{
      //可以支持更多
    }
    },
    submitForm() {
      // if (this.tableData.length == 0) {
      //   this.$message({
      //     message: "请添加代理",
      //     type: "warning"
      //   });
      //   return;
      // } else {
        this.tableData.forEach(item => {
          item.spuId = this.spuId;
        });
        for (let i = 0; i < this.tableData.length; i++) {
          var item = this.tableData[i];
          if (item.upDays == 0) {
            this.$message({
              message: "升级周期不能为0",
              type: "warning"
            });
            return;
          } 
          // else if (item.rebateRatio == 0) {
          //   this.$message({
          //     message: "返利比例不能为0",
          //     type: "warning"
          //   });
          //   return;
          // } 
          // else if (item.superiorRatio == 0) {
          //   this.$message({
          //     message: "上级分销比例不能为0",
          //     type: "warning"
          //   });
          //   return;
          // } else if (item.secuperiorRatio == 0) {
          //   this.$message({
          //     message: "上两级分销比例不能为0",
          //     type: "warning"
          //   });
          //   return;
          // } 
          else if (item.standard == 0) {
            this.$message({
              message: "等级标准不能为0",
              type: "warning"
            });
            return;
          } else if (item.coalitionRatio == 0) {
            this.$message({
              message: "商盟商家返利比例不能为0",
              type: "warning"
            });
            return;
          } 
          // else if (item.superiorRebateRatio == 0) {
          //   this.$message({
          //     message: "上级返利额比例不能为0",
          //     type: "warning"
          //   });
          //   return;
          // }
        }
        let submitData = JSON.parse(JSON.stringify(this.tableData));
        for (let i = 0; i < submitData.length; i++) {
          var item = submitData[i];
          submitData[i].rebateRatio = item.rebateRatio * 10;
          submitData[i].superiorRatio = item.superiorRatio * 10;
          submitData[i].secuperiorRatio = item.secuperiorRatio * 10;
          submitData[i].coalitionRatio = item.coalitionRatio * 10;
          submitData[i].superiorRebateRatio = item.superiorRebateRatio * 10;
        }
        var param = {
          data: {
            spuId: this.spuId,
            rebateRulesList: submitData
          }
        };
        this.$service.tRebaterulesAdd(param).then(res => {
          if (res.code == "00000") {
            this.$message({
              message: "添加成功",
              type: "success"
            });
            this.$router.back();
          }
        });
      // }
    },
    initData() {
      var param = {
        data: {
          spuId: this.spuId
        }
      };
      this.$service.getSpuidRebateRules(param).then(res => {
        if (res.code == "00000") {
          this.tableData = res.data;
          for (let i = 0; i < this.tableData.length; i++) {
            var item = this.tableData[i];
            this.tableData[i].rebateRatio = item.rebateRatio / 10;
            this.tableData[i].superiorRatio = item.superiorRatio / 10;
            this.tableData[i].secuperiorRatio = item.secuperiorRatio / 10;
            this.tableData[i].coalitionRatio = item.coalitionRatio / 10;
            this.tableData[i].superiorRebateRatio =
              item.superiorRebateRatio / 10;
          }
        }
      });
    },
    goBack() {
      this.$router.back();
    },
    add() {
      this.isVisible = true;
      let level;
      if (this.tableData.length == 0) {
        level = 1;
      } else {
        level = this.tableData[this.tableData.length - 1].sort + 1;
      }
      let levelNum = this.numText(level);
      var list = {
        levelTitle: levelNum + "级代理",
        upDays: "",
        rebateRatio: "",
        superiorRebateRatio: "",
        superiorRatio: "",
        secuperiorRatio: "",
        standard: "",
        coalitionRatio: "",
        sort: level,
        spuId: ""
      };
      this.tableData.push(list);
    },
    handleSelectionChange() {},
    handleClickDelete(e) {
      this.tableData.splice(e, 1);
    }
  },
  watch: {}
};
</script>
<style scoped>
</style>